export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  
  // 模拟产品数据库（与 index.ts 保持一致）
  const allProducts = [
    {
      id: '1',
      title: 'Vue3 + Vite 后台管理系统',
      description: '基于 Vue3、Vite、TypeScript、Element Plus 的后台管理系统，包含权限管理、数据可视化等功能',
      price: 299,
      originalPrice: 599,
      cover: 'https://picsum.photos/seed/admin-system/600/400',
      category: 'frontend',
      tags: ['Vue3', 'TypeScript', 'Element Plus'],
      tech: ['Vue3', 'Vite', 'TypeScript', 'Element Plus', 'Pinia'],
      difficulty: 'intermediate' as const,
      rating: 4.8,
      reviews: 128,
      downloads: 1580,
      createdAt: '2025-01-01',
      updatedAt: '2025-01-10',
      // 详情页专属字段
      detailHtml: `
        <h2>项目简介</h2>
        <p>这是一个基于 Vue3 + Vite + TypeScript + Element Plus 的现代化后台管理系统模板。</p>
        
        <h3>核心功能</h3>
        <ul>
          <li>🔐 完整的权限管理系统（RBAC）</li>
          <li>📊 丰富的数据可视化图表（ECharts）</li>
          <li>📱 响应式布局，支持移动端</li>
          <li>🎨 多主题切换（亮色/暗色）</li>
          <li>🌐 国际化支持（中英文）</li>
          <li>📦 模块化设计，易于扩展</li>
        </ul>
        
        <h3>技术栈</h3>
        <ul>
          <li><strong>Vue3</strong> - 渐进式 JavaScript 框架</li>
          <li><strong>Vite</strong> - 新一代前端构建工具</li>
          <li><strong>TypeScript</strong> - JavaScript 的超集</li>
          <li><strong>Element Plus</strong> - 基于 Vue3 的组件库</li>
          <li><strong>Pinia</strong> - Vue3 官方状态管理库</li>
          <li><strong>Vue Router</strong> - Vue.js 官方路由</li>
          <li><strong>Axios</strong> - 基于 Promise 的 HTTP 库</li>
          <li><strong>ECharts</strong> - 强大的数据可视化库</li>
        </ul>
        
        <h3>项目特色</h3>
        <p>✅ 代码规范：ESLint + Prettier 保证代码质量</p>
        <p>✅ 类型安全：全面使用 TypeScript</p>
        <p>✅ 构建优化：Vite 极速构建体验</p>
        <p>✅ 开箱即用：完整的项目结构和最佳实践</p>
        
        <h3>适用场景</h3>
        <p>适合企业级后台管理系统、数据分析平台、CMS 内容管理系统等场景。</p>
      `,
      demoUrl: 'https://element-plus.org/zh-CN/',
    },
    {
      id: '2',
      title: 'React18 电商系统全栈项目',
      description: '完整的电商系统，包含用户端、管理后台、支付集成、订单管理等功能',
      price: 499,
      originalPrice: 999,
      cover: 'https://picsum.photos/seed/ecommerce/600/400',
      category: 'fullstack',
      tags: ['React', 'Node.js', 'MongoDB'],
      tech: ['React18', 'Next.js', 'Node.js', 'Express', 'MongoDB'],
      difficulty: 'advanced' as const,
      rating: 4.9,
      reviews: 256,
      downloads: 2340,
      createdAt: '2025-01-05',
      updatedAt: '2025-01-12',
      detailHtml: `
        <h2>项目简介</h2>
        <p>完整的电商系统全栈项目，前端使用 React18 + Next.js，后端使用 Node.js + Express + MongoDB。</p>
        
        <h3>核心功能</h3>
        <ul>
          <li>🛍️ 商品管理：商品展示、分类、搜索、筛选</li>
          <li>🛒 购物车：添加、删除、修改数量</li>
          <li>💳 支付集成：支持支付宝、微信支付</li>
          <li>📦 订单管理：订单创建、支付、发货、售后</li>
          <li>👤 用户系统：注册、登录、个人中心</li>
          <li>📊 后台管理：商品管理、订单管理、用户管理</li>
        </ul>
        
        <h3>技术特点</h3>
        <p>✅ SSR 服务端渲染：Next.js 提供更好的 SEO</p>
        <p>✅ RESTful API：标准的 API 设计</p>
        <p>✅ JWT 认证：安全的用户认证</p>
        <p>✅ 支付集成：完整的支付流程</p>
      `,
      demoUrl: 'https://nextjs.org/',
    },
    {
      id: '3',
      title: 'Nuxt3 内容管理系统',
      description: '基于 Nuxt3 的内容管理系统，支持 Markdown、SEO 优化、多语言等功能',
      price: 399,
      originalPrice: 799,
      cover: 'https://picsum.photos/seed/cms/600/400',
      category: 'fullstack',
      tags: ['Nuxt3', 'Vue3', 'TailwindCSS'],
      tech: ['Nuxt3', 'Vue3', 'Nuxt Content', 'TailwindCSS'],
      difficulty: 'intermediate' as const,
      rating: 4.7,
      reviews: 89,
      downloads: 956,
      createdAt: '2025-01-08',
      updatedAt: '2025-01-11',
      detailHtml: `
        <h2>项目简介</h2>
        <p>基于 Nuxt3 的内容管理系统，适合博客、文档站、企业官网等场景。</p>
        
        <h3>核心功能</h3>
        <ul>
          <li>📝 Markdown 编辑器：支持代码高亮、图片上传</li>
          <li>🔍 全文搜索：快速查找内容</li>
          <li>🌐 多语言支持：国际化方案</li>
          <li>📱 响应式设计：完美适配各种设备</li>
          <li>⚡ SSR/SSG：极致的性能优化</li>
          <li>🎨 TailwindCSS：现代化的样式方案</li>
        </ul>
      `,
      demoUrl: 'https://nuxt.com/',
    },
    {
      id: '4',
      title: 'NestJS + TypeORM 企业级后端',
      description: '企业级 RESTful API 项目，包含认证授权、数据库操作、文件上传等功能',
      price: 599,
      originalPrice: 1299,
      cover: 'https://picsum.photos/seed/backend/600/400',
      category: 'backend',
      tags: ['NestJS', 'TypeScript', 'MySQL'],
      tech: ['NestJS', 'TypeScript', 'TypeORM', 'MySQL', 'Redis'],
      difficulty: 'advanced' as const,
      rating: 4.9,
      reviews: 178,
      downloads: 1876,
      createdAt: '2025-01-03',
      updatedAt: '2025-01-09',
      detailHtml: `
        <h2>项目简介</h2>
        <p>基于 NestJS 的企业级后端项目，采用模块化设计，易于扩展和维护。</p>
        
        <h3>核心功能</h3>
        <ul>
          <li>🔐 JWT 认证授权：完整的用户认证体系</li>
          <li>🗄️ TypeORM：优雅的 ORM 框架</li>
          <li>📁 文件上传：支持本地和云存储</li>
          <li>📧 邮件发送：邮件通知功能</li>
          <li>⚡ Redis 缓存：提升系统性能</li>
          <li>📊 日志系统：完整的日志记录</li>
        </ul>
      `,
      demoUrl: 'https://nestjs.com/',
    },
    {
      id: '5',
      title: 'uniapp 跨平台商城小程序',
      description: 'uniapp 开发的跨平台商城，支持微信小程序、H5、App 多端',
      price: 699,
      originalPrice: 1499,
      cover: 'https://picsum.photos/seed/miniapp/600/400',
      category: 'mobile',
      tags: ['uniapp', 'Vue3', '微信小程序'],
      tech: ['uniapp', 'Vue3', '微信小程序', 'uni-ui'],
      difficulty: 'intermediate' as const,
      rating: 4.6,
      reviews: 145,
      downloads: 1234,
      createdAt: '2025-01-06',
      updatedAt: '2025-01-13',
      detailHtml: `
        <h2>项目简介</h2>
        <p>使用 uniapp 开发的跨平台商城，一套代码多端运行。</p>
        
        <h3>核心功能</h3>
        <ul>
          <li>🛍️ 商品展示：分类、搜索、详情</li>
          <li>🛒 购物车：商品管理</li>
          <li>💳 订单支付：微信支付集成</li>
          <li>👤 个人中心：订单、收藏、地址</li>
          <li>📱 多端适配：小程序、H5、App</li>
        </ul>
      `,
      demoUrl: 'https://uniapp.dcloud.net.cn/',
    },
  ]
  
  // 查找产品
  const product = allProducts.find(p => p.id === id)
  
  if (!product) {
    throw createError({
      statusCode: 404,
      message: '产品不存在'
    })
  }
  
  // 添加 images 字段
  const productWithImages = {
    ...product,
    images: [
      product.cover,
      product.cover.replace('/600/400', '/600/400?random=1'),
      product.cover.replace('/600/400', '/600/400?random=2'),
      product.cover.replace('/600/400', '/600/400?random=3'),
    ]
  }
  
  return {
    code: 200,
    message: 'success',
    data: productWithImages
  }
})

